<template>
  <MyVanskeleton :row="3" :loading="loading">
    <template v-slot:my-content>
      <div class="company-style">
        <!-- 导航栏 start -->
        <van-nav-bar :title="title" fixed left-text="取消" @click-left="$router.back()"/>
        <!-- 导航栏 end -->

        <!-- 内容 start -->
        <div class="content-top jobs-index">
					<MyEmpty v-if="jobList.length == 0"/>
          <van-list v-else class="list" @load="loadData" :load="dataLoading" :finished="finished">
            <div class="item" v-for="item,index in jobList" :key="index">
              <div class="info">
                <div class="checkbox">
                  <van-checkbox v-model="item.isCheck" checked-color="#07f" @change="onChange"></van-checkbox>
                </div>
                <div class="left">
                  <b>{{item.jobName}}</b>
                  <p>
                    <small class="good" v-if="item.refreshFlag">今日已刷新</small>
										<small class="bad" v-if="item.cqwwhFlag">长期未维护</small>
                  </p>
                  <p>
                    <span class="end">{{item.endDateStr}}</span>
                    <i></i>
                    <span class="look">{{item.clicks}}</span>
                  </p>
                </div>
              </div>
            </div>
          </van-list>
        </div>
        <!-- 内容 end -->

        <!-- 批量操作start -->
        <div class="jobs-batch-btns">
          <p>
            <van-checkbox v-model="checkAllFlag" checked-color="#07f" @click="checkAll">全选</van-checkbox>
            <span>{{`(${checkedList.length}/${maxCheckCount})`}}</span>
          </p>
          <p v-if="jobState == 1">
            <van-button type="primary" text="刷新" @click="operate('Refresh')" :loading="operateLoading"></van-button>
            <van-button type="primary" text="停止" @click="operate('Stop')" :loading="operateLoading"></van-button>
            <van-button type="primary" text="再发布" @click="operate('PubAgain')" :loading="operateLoading"></van-button>
          </p>
          <p v-else>
            <van-button type="primary" text="发布" @click="operate('ReStart')" :loading="operateLoading"></van-button>
            <van-button type="primary" text="删除" @click="operate('Del')" :loading="operateLoading"></van-button>
          </p>
        </div>
        <!-- end -->
      </div>
    </template>
  </MyVanskeleton>
</template>

<script>
import { NavBar, List, Checkbox, CheckboxGroup, Button, Toast, Dialog } from "vant";
import Global from '@/Global';
export default {
  name: "LivePlay",
  components: {
    [NavBar.name]: NavBar,
    [List.name]: List,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Button.name]: Button,
  },
  // 定义属性
  data() {
    return {
			title:`${this.$route.query.jobState==1?'在招职位':'停止职位'}批量操作`,
			//loading
			loading:false,
			dataLoading:false,
			finished:false,
      operateLoading:false,
			//query data
			jobState:this.$route.query.jobState,//1 招聘中 0停止
			//responseData
			jobList:[],
			//check data
      maxCheckCount :100,
			checkAllFlag:false,
    };
  },
	computed:{
		checkedList(){
			return this.jobList.filter(item=>item.isCheck);
		},
	},
	mounted(){
		this.loadData();
	},
  // 方法集合
  methods: {
		loadData(){
			this.dataLoading = true
			this.$api.get('/CompanyStation/GetStationList4Batch',{jobState:this.jobState}).then(res=>{
				this.dataLoading =false;
				this.finished = true;
				this.jobList = res.response;
			})
		},
		checkAll(){
			this.jobList.forEach(item => {
				item.isCheck = this.checkAllFlag;
			});
		},
    onChange(){
      this.checkAllFlag = this.jobList.length == this.checkedList.length
    },
    operate(operation){
      let idArr = new Array();
      this.checkedList.forEach(item =>{
        idArr.push(item.jobIDEncrypt);
      });
			if(idArr.length == 0){Toast('请至少选择一个岗位');return;}
			if(operation=='Del'){
				Dialog.confirm({ title: '删除提醒', message: '删除后不可恢复，确认继续？' }).then(()=>{
					this.doOperate(operation,idArr);
				})
			}
			else{
				this.doOperate(operation,idArr);
			}
      
    },
		doOperate(operation,idArr){
			this.operateLoading =  true;
			this.$api.post(`/CompanyStation/OperateStation?operation=${operation}`,idArr).then(res=>{
				this.operateLoading = false;
        Toast(res.msg);
        if(res.success){
          this.loadData()
					this.$bus.$emit(Global.bus_company_joblist_update);
        }
      })
		}
	},
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>